<template>
  <el-row :gutter="20">
    <el-col :span="6" style="display: flex; justify-content: center; align-items: center">
      <Aselect :options="options" v-model="pro" size="small" @change="changePro"></Aselect>
    </el-col>
    <el-col :span="1" style="display: flex; justify-content: center; align-items: center">
      <el-icon><SemiSelect /></el-icon>
    </el-col>
    <el-col :span="13" style="display: flex; justify-content: center; align-items: center">
      <Aselect
        :options="cityOpt"
        :multiple="multiple"
        v-model="city"
        size="small"
        @change="changeCity"
      ></Aselect>
      <div style="width: 20px"></div>
      <el-button
        type="primary"
        size="small"
        v-if="multiple"
        @click="allCity"
        :disabled="!pro.length"
        >选择所有城市</el-button
      >
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import Aselect from "./Aselect.vue";
import zh from "@/assets/js/zh";
import { onMounted, ref, watch } from "vue";

// 定义地址数据接口
interface AddressData {
  pro: string;
  city: string | string[] | null;
}

// 定义选项类型
interface SelectOption {
  label: string;
  value: string;
}

// 使用带类型的 defineProps
const props = defineProps<{
  // 多选城市
  multiple?: boolean;
  modelValue?: AddressData;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: AddressData): void;
}>();

const options = ref<SelectOption[]>([]);
const cityOpt = ref<SelectOption[]>([]);

const pro = ref<string>("");
const city = ref<string | string[] | null>(null);

function allCity() {
  city.value = cityOpt.value.map((res) => {
    return res.value;
  });
  const address: AddressData = {
    pro: pro.value,
    city: city.value,
  };
  emit("update:modelValue", address);
}

onMounted(() => {
  // 循环查找省
  const opt = Object.keys(zh[86]).map((res) => {
    return {
      label: zh[86][res],
      value: res,
    };
  });
  options.value = opt;
});
function changePro(e: string | number | (string | number)[] | null) {
  // 只处理字符串类型的省编码
  if (typeof e !== "string") return;

  const opt = Object.keys(zh[e]).map((res) => {
    return {
      label: zh[e][res],
      value: res,
    };
  });
  cityOpt.value = opt;
  city.value = null;
  const address: AddressData = {
    pro: e,
    city: city.value,
  };
  emit("update:modelValue", address);
}
function changeCity(e: string | number | (string | number)[] | null) {
  // 类型兼容处理：只处理 string 或 array 类型，其他情况转为 null
  let cityValue: string | string[] | null = null;

  if (typeof e === "string") {
    cityValue = e;
  } else if (Array.isArray(e)) {
    cityValue = e.map((item) => String(item));
  }

  const address: AddressData = {
    pro: pro.value,
    city: cityValue,
  };
  emit("update:modelValue", address);
}

watch(
  () => props.modelValue,
  (val) => {
    pro.value = val?.pro || "";
    city.value = val?.city || null;
    if (pro.value.length) {
      const opt = Object.keys(zh[pro.value]).map((res) => {
        return {
          label: zh[pro.value][res],
          value: res,
        };
      });
      cityOpt.value = opt;
    }
  },
  {
    immediate: true,
  },
);
</script>

<style></style>
